<template>
  <InputArrayWrapper>
    <div class="row" v-for="(item,index) in list" :key="index">
      <a-input v-model="item.value" @input="onChange" :placeholder="placeholder"></a-input>
      <div class="btns">
        <a-button icon="minus" size="small" shape="circle" type="danger" @click="handleDel(index)" v-if="list.length > 1"></a-button>
        <a-button icon="plus" size="small" shape="circle" @click="handleAdd" v-if="index === list.length - 1"></a-button>
      </div>
    </div>
  </InputArrayWrapper>
</template>

<script>
import { InputArrayWrapper } from './style'
export default {
  name: 'input-array',
  components: {
    InputArrayWrapper,
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Array,
      default () {
        return []
      },
    },
    placeholder: {
      type: String,
      default: '请输入内容',
    },
  },
  data () {
    return {
      list: [],
    }
  },
  watch: {
    value (val) {
      this.list = val.map((item, index) => {
        return {
          value: item,
        }
      })
      if (val.length === 0) {
        this.handleAdd()
      }
    },
  },
  mounted () {
    this.handleAdd()
  },
  methods: {
    onChange () {
      this.$emit('change', this.list.map(item => item.value))
    },
    onBlur () {
      this.$emit('change')
    },
    handleAdd () {
      this.list.push({ value: '' })
      this.onChange()
    },
    handleDel (index) {
      this.list.splice(index, 1)
      this.onChange()
    },
  },
}
</script>
